<template>

    <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in banner" :key="item.id">
         <img :src="'http://localhost:8889'+'/'+item.bannerSrc+'.jpg'" alt="" >
        </div>
        
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <!-- <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->
    
    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
</div>
 

</template>


<script>
import Swiper from "swiper"
import "swiper/css/swiper.min.css"
export default {
    data(){
   return{
     banner:[]
   }
    },

updated(){

    var mySwiper = new Swiper ('.swiper-container', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    // navigation: {
    //   nextEl: '.swiper-button-next',
    //   prevEl: '.swiper-button-prev',
    // },
    
    // 如果需要滚动条

    effect:"fade",
    autoplay:true,
    // mousewheel: true
   
  
  })        

},
async created(){
      this.$axios({
         method:"get",
         url:this.$host+"/banner"

      }).then(resp=>{
          this.banner=[]
          this.banner=resp.data
      })
}


};


</script>

<style scoped>
.swiper-container {
    width: 1420px;
    height: 400px;
    margin: 0 auto;
}  
img{
  width: 1420px;
    height: 400px;
}

</style>